<template>
	<view
		class="tui-countdown__verify"
		:class="{ 'tui-verify__opacity': status > 1 && isOpacity }"
		:style="{ width: width, height: height, padding: padding, margin: margin, borderRadius: radius, fontSize: size + 'rpx', color: color, background: background }"
		:hover-class="hover && status == 1 ? 'tui-verify__opacity' : ''"
		:hover-stay-time="150"
		@tap.stop="sendCode"
	>
		{{ showText }}
		<view class="tui-verify__line" :style="{ borderWidth: borderWidth, borderColor: borderColor, borderRadius: radius }"></view>
	</view>
</template>

<script setup>
import { ref, watch, onBeforeMount, onBeforeUnmount } from 'vue'

const emit = defineEmits(['send', 'countdown', 'end'])

const props = defineProps({
	//发送前显示文本
	text: {
		type: String,
		default: '发送验证码'
	},
	//发送中显示文本
	sendText: {
		type: String,
		default: '请稍候...'
	},
	//发送后显示文本(前面会自动加上seconds)
	countdownText: {
		type: String,
		default: 's后获取'
	},
	//倒计时秒数
	seconds: {
		type: Number,
		default: 60
	},
	//宽度
	width: {
		type: String,
		default: '182rpx'
	},
	//高度
	height: {
		type: String,
		default: '56rpx'
	},
	padding: {
		type: String,
		default: '0'
	},
	margin: {
		type: String,
		default: '0'
	},
	//圆角
	radius: {
		type: String,
		default: '6rpx'
	},
	//字体大小 rpx
	size: {
		type: Number,
		default: 24
	},
	//字体颜色
	color: {
		type: String,
		default: '#5677fc'
	},
	//背景色
	background: {
		type: String,
		default: 'transparent'
	},
	//边框宽度
	borderWidth: {
		type: String,
		default: '1px'
	},
	//边框颜色
	borderColor: {
		type: String,
		default: '#5677fc'
	},
	//倒计时的时候是否改变opacity值
	isOpacity: {
		type: Boolean,
		default: true
	},
	//是否需要点击效果
	hover: {
		type: Boolean,
		default: true
	},
	//短信发送成功（改变数值且数值大于0表示发送成功，多次发送数值递增即可）
	successVal: {
		type: Number,
		default: 0
	},
	//重置组件状态（改变数值且数值大于0，多次重置数值递增即可）
	resetVal: {
		type: Number,
		default: 0
	},
	//是否默认为倒计时状态
	start: {
		type: Boolean,
		default: false
	},
	//自定义参数
	params: {
		type: [Number, String],
		default: 0
	}
})

let showText = ref('')
let status = ref(1) //1-发送前，2-发送中 3-发送成功，倒计时
let countdownTimer = null

watch(
	() => props.successVal,
	nVal => {
		if (nVal && nVal > 0) {
			doLoop()
		}
	}
)

watch(
	() => props.resetVal,
	nVal => {
		if (nVal && nVal > 0) {
			reset()
		}
	}
)

onBeforeMount(() => {
	if (props.start) {
		doLoop()
	} else {
		showText.value = props.text
		clearTimer()
	}
})

onBeforeUnmount(() => {
	clearTimer()
})

const clearTimer = () => {
	clearInterval(countdownTimer)
	countdownTimer = null
}

//验证码发送成功
const success = () => {
	doLoop()
}

//重置发送组件
const reset = () => {
	clearTimer()
	showText.value = props.text
	status.value = 1
}

const sendCode = () => {
	if (status.value > 1) return
	clearTimer()
	status.value = 2
	showText.value = props.sendText
	emit('send', {
		params: props.params
	})
}

const doLoop = () => {
	clearTimer()
	status.value = 3
	let seconds = props.seconds || 60
	showText.value = seconds + props.countdownText
	countdownTimer = setInterval(() => {
		if (seconds > 1) {
			--seconds
			showText.value = seconds + props.countdownText
			//倒计时
			emit('countdown', {
				seconds: seconds,
				params: props.params
			})
		} else {
			reset()
			//倒计时结束
			emit('end', {
				params: props.params
			})
		}
	}, 1000)
}
</script>

<style lang="scss" scoped>
.tui-countdown__verify {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	box-sizing: border-box;
}

.tui-verify__opacity {
	opacity: 0.5;
}

.tui-verify__line {
	position: absolute;
	width: 200%;
	height: 200%;
	transform-origin: 0 0;
	transform: scale(0.5, 0.5) translateZ(0);
	box-sizing: border-box;
	border-style: solid;
	left: 0;
	top: 0;
	pointer-events: none;
}
</style>
